<template>
        <div class="baiduGPS-container">
            <div class="baidu-map" >
                <baidu-map class="bm-view" :style="{height:bmViewHeight+'px'}" :center="center" :zoom="zoom" @ready="handler">
                    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                    <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
                    <bm-traffic :predictDate="{weekday: 7, hour: 12}"/>
                    <!--<bml-marker-clusterer :averageCenter="true">-->
                        <!--<bm-marker v-for="marker of markers" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>-->
                    <!--</bml-marker-clusterer>-->
                </baidu-map>
            </div>
        </div>
</template>

<script>
    import Vue from 'vue'
    import BaiduMap from 'vue-baidu-map'
    import {isDev,clientHeight} from "../../utils/tools";
    Vue.use(BaiduMap, {
        // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
        ak: 'DWNotd3kMKh7VsH7qPG5ypbOk0kUwQQB'
    })
    export default {
        name: "BaiduGPS",
        data(){
            return {
                menuId:5,
                count: 1,
                center: {lng: 113.148088, lat: 22.965468},
                zoom: 17,
                bmViewHeight:600,
                averageCenter:true,
                markers:[]
            }
        },
        mounted(){
            let height = clientHeight();
            console.log("height",height)
            this.bmViewHeight=height
            this.fetchStrategyDetail()
        },
        methods:{
            fetchStrategyDetail(){
                this.$api.contentSet.contentSetDetail({id:this.menuId}).then(res=>{
                    // isDev&&console.log(res);
                    if(res.code==0){
                        isDev&&console.log(res.data);
                        this.contentDetail = res.data
                    }else{
                        console.log(res);
                    }
                }).catch(error=>{
                    console.log(this.error);
                })
            },
            handler ({BMap, map}) {
                console.log(BMap, map)
                setTimeout(()=>{
                    // this.showMap=true
                    this.center.lng = this.contentDetail.longitude
                    this.center.lat =this.contentDetail.latitude
                },500)
            }
        }
    }
</script>

<style lang="less" scoped>
.baiduGPS-container{
    width: 100%;
    min-height: 100%;
    .baidu-map{
        .bm-view{
            width: 100%;
            /*height: 600px;*/
        }
    }

}
</style>
